<!-- 首页工具 -->
<style lang="scss">
    .pro-crm-home-tools{
        background: #ffffff;
        padding: 0 20px;
        position: relative;
        padding-bottom: 10px;
        .el-tabs__header{
            margin:0;
        }
        .close-tab{
            position: absolute;
            top:45px;
            right:26px;
            font-size: 12px;
            color:#6a7794;
            cursor: pointer;
            &:hover{
                color:#2f6bcf;
            }
        }
        .empty-box{
            padding: 30px 15px;
            font-size: 18px;
            background: #ffffff;
            color: #999999;
            cursor: pointer;
        }
        .content-box{
            height:530px;
            border-top: 0;
            border: 1px solid #e4e7ed;
        }
    }
</style>
<template>
  <div class="pro-crm-home-tools">
    <el-tabs
      v-model="activeTab"
      @tab-click="handleClick"
    >
      <el-tab-pane
        :label="$t('_tools.log')"
        name="log"
        lazy
      >
        <log
          ref="log"
          :visible="visible"
          @setVisible="setVisible"
        />
      </el-tab-pane>
      <el-tab-pane
        :label="$t('_tools.memo')"
        name="memo"
        lazy
      >
        <memo
          ref="memo"
          :visible="visible"
          @setVisible="setVisible"
        />
      </el-tab-pane>
      <el-tab-pane
        :label="$t('_tools.process')"
        name="process"
        lazy
      >
        <process
          ref="process"
          :visible="visible"
          @setVisible="setVisible"
        />
      </el-tab-pane>
      <el-tab-pane
        :label="$t('_tools.contact')"
        name="contact"
        lazy
      >
        <contact
          ref="contact"
          :visible="visible"
          @setVisible="setVisible"
        />
      </el-tab-pane>
    </el-tabs>
    <i
      v-show="visible"
      @click="setVisible(false)"
      class="jeicon jeicon-error close-tab"
    />
  </div>
</template>
<script>
import VueI18n from 'vue-i18n';
import Memo from './memo.vue';
import Process from './process.vue';
import Contact from './contact.vue';
import Log from '../log/log.vue';
import getLang from '../../assets/lang/mergeLang';

const i18n = new VueI18n({
  locale: JE.getCookies('je-local-lang') || 'zh_CN', // 语言标识
  messages: {
    zh_CN: getLang('zh', [{ name: '_tools', data: require('./../../assets/lang/tools/zh') }]), // 中文语言包
    en: getLang('en', [{ name: '_tools', data: require('./../../assets/lang/tools/en') }]), // 英文语言包
  },
});

export default {
  name: 'HomeTools',
  components: {
    Memo, Process, Contact, Log,
  },
  i18n,
  data() {
    return {
      activeTab: 'log',
      visible: false,
    };
  },
  methods: {
    handleClick() {
      const me = this;
      me.visible = true;
    },
    setVisible(visible) {
      this.visible = visible;
    },
  },
};
</script>
